import gsap from 'gsap';
import { useGSAP } from '@gsap/react';
import { useRef } from 'react';
import style from "./index.module.scss"
import LeftToRightText from '@/components/LeftToRightText';
import { ScrollTrigger } from "gsap/ScrollTrigger"
import BasePage from '@/components/BasePage'
import BusAreaCard, { CardData } from './components/BusAreaCard'
import EngChiTitle from '@/components/EngChiTitle'
import NewsCard, { type NewsData } from '@/components/NewsCard'
import UpdateCityCard, { type CardDatas } from './components/UpdateCityCard'; 4
import Marquee from "react-fast-marquee"
gsap.registerPlugin(useGSAP)
gsap.registerPlugin(ScrollTrigger)
const cardData: CardData[] = [
    {
        bacColor1: "#e0efff",
        bacColor2: "#cfe6ff",
        textColor: "#598aeb",
        title: "智慧城市",
        titleIndex: "smart-city",
        desc: "自主研发软硬件一体化解决方案",
        imgUrl: "/s",
        tags: ["新城建设/旧城改造", "软件平台建设", "万物互联产品", "智慧城市家具", "智慧城市解决方案"]
    },
    {
        bacColor1: "#e2f4f6",
        bacColor2: "#c9f2f7",
        textColor: "#37787c",
        title: "智慧照明",
        titleIndex: "smart-light",
        desc: "研发、设计、智造、施工一体化总包",
        imgUrl: "/s",
        tags: ["智慧一多杆合一路灯", "户外智慧照明", "室内智能照明", "夜游亮化"]
    },
    {
        bacColor1: "#fff4e8",
        bacColor2: "#ffebd6",
        textColor: "#ecc16b",
        title: "市政工程",
        titleIndex: "municipal-works",
        desc: "丰富的项目经验和强大的施工能力",
        imgUrl: "/s",
        tags: ["市政公用工程", "城市及道路照明工程", "建筑工程施工", "城市园林绿化工程", "机电工程", "电子与智能化工程", "钢结构工程", "消防设施工程", "环保工程", "建筑装修装饰工程"]
    },
]

const newsData: NewsData = {
    imgUrl: "/src/assets/home/news-pic.png",
    title: "望江楼公园-成都望江楼路智慧路灯项目",
    time: "2024.10.01",
    content: "望江楼公园座落在成都东门锦江南岸，以拥有望江楼古建筑群、唐代著名女诗人薛涛纪念馆等文物遗迹及各类珍奇异竹而闻名中外。望江楼路，是连接公园的重要通道且紧邻四川大"
}

const updateCityDatas: CardDatas[] = [
    {
        title: "公共空间改造",
        textLists: ["智慧道路", "市政改造", "智慧交通", "智慧停车", "数字文旅", "智慧新基建", "Ai赋能"]
    },
    {
        title: "基础设施更新",
        textLists: ["智慧公交站", "便民驿站", "智慧井盖", "智慧垃圾桶", "智慧座椅", "隔离护栏", "充电桩"]
    },
    {
        title: "新旧建筑更新",
        textLists: ["新旧建筑安全监测", "桥梁监测", "安防监测", "节能改造"]
    },
    {
        title: "环境改善",
        textLists: ["空气监测", "噪音监测", "绿化工程", "垃圾处理"]
    },
    {
        title: "社会配套设施建设",
        textLists: ["智慧校园", "智慧水务", "智慧园林", "智慧医疗", "智慧市政"]
    },
]
export default function Home() {
    const container = useRef<HTMLDivElement>(null)
    useGSAP(() => {
        const tl = gsap.timeline()
        const loopTl = gsap.timeline({ repeat: -1, yoyo: true });
        const keyframes = [
            { translate3d: "0.3318% 0px 20.0305px", rotate: "14.9238deg", rotateY: "38.6893deg", rotateX: "10.061deg" },
            { translate3d: "0.2886% 0px 39.8583px", rotate: "-20deg", rotateY: "44.6694deg", rotateX: "370.118deg" },
            { translate3d: "-0.1667% 0px 0.0081px", rotate: "0.983deg", rotateY: "-29.996deg", rotateX: "20.3029deg" },
            { translate3d: "-0.3323% 0px 9.939px", rotate: "-19.872deg", rotateY: "-25.0305deg", rotateX: "392.714deg" },
            { translate3d: "-0.1671% 0px 0.0296px", rotate: "0.9378deg", rotateY: "-29.9852deg", rotateX: "21.1101deg" }
        ];
        tl.to(".player", {
            scale: 0.55,
            delay: 2,
            duration: 1,
            ease: "power2.inOut",
        })
        tl.to(".move", {
            clipPath: "inset(0px round 4.507vw)",
        }, "<")
        tl.set(".navbar", { opacity: 1 })
        tl.set(container.current, {
            overflow: "initial",
            onComplete() {
                const tl = gsap.timeline();
                tl.to(".player", {
                    opacity: 0.34,
                    scale: 0.5,
                    ease: "power2.inOut",
                }).to(".case-text", {
                    opacity: 0
                }, "<")
                ScrollTrigger.create({
                    animation: tl,
                    trigger: ".section-2-content",
                    start: "top bottom", // 
                    end: "center bottom", // 
                    pinSpacing: false,
                    scrub: true,
                    onUpdate(self) {
                        if (self.progress === 1) {
                            loopTl.progress(0)
                        } else {
                            loopTl.progress(self.progress)
                        }
                    },
                    onEnter() {
                        loopTl.paused(true)
                    },
                    onLeaveBack() {
                        loopTl.resume(1)
                    }
                });
                const tl2 = gsap.timeline();
                tl2.to(".player", {
                    scale: 1,
                    opacity: 1,
                    ease: "power2.inOut",
                }).to(".section-2-content", {
                    backgroundColor: "#d9f0fe"
                }, "<")
                ScrollTrigger.create({
                    animation: tl2,
                    trigger: ".update-card-box",
                    start: "top bottom", // 
                    end: "bottom bottom", // 
                    scrub: true,
                })
            }
        }, "+=2")
        keyframes.forEach((frame, i) => {
            loopTl.to(".player", {
                xPercent: parseFloat(frame.translate3d.split(" ")[0]), // 提取X偏移
                z: parseFloat(frame.translate3d.split(" ")[2]), // 提取Z轴偏移
                rotation: frame.rotate,
                rotationY: frame.rotateY,
                rotationX: frame.rotateX,
                duration: 3,
                ease: "power2.inOut",
            })
        })
        tl.add(loopTl, "-=3.5");
    }, { scope: container })
    return (
        <BasePage navOptions={{ theme: "light" }} ref={container} className={`relative overflow-hidden ${style.home}`}>
            <section className='frame w-full h-full fixed top-0 left-0' >
                <div className='player w-full h-full absolute origin-center transform-3d aspect-video'>
                    <div className='move w-full h-full absolute'>
                        <video src="test2.mp4" autoPlay muted loop></video>
                    </div>
                    <div className='move w-full h-full dd absolute'>
                        <video src="test2.mp4" autoPlay muted loop></video>
                    </div>
                    <div className='move w-full h-full dd2 absolute'>
                        <video src="test2.mp4" autoPlay muted loop></video>
                    </div>
                    <div className='cover'></div>
                </div>
            </section>
            <section className='content  relative'>
                <div className='section-1 h-screen'>
                    <div className='fixed case-text top-[50%] z-1 translate-y-[-50%] px-[100px] flex flex-col items-center'>
                        <div><LeftToRightText className='my-4' content='全国案例' showOptions={{ delay: 3 }} textStyle={{ fontSize: 80, fontWeight: "bold", letterSpacing: "3px" }} /></div>
                        <div><LeftToRightText content='NATIONAL CASE STUDIES' showOptions={{ delay: 3 }} textStyle={{ fontSize: 28, fontWeight: "bold" }} /></div>
                    </div>
                </div>
                <div className='flex flex-col section-2'>
                    <div className='scroller h-130'></div>
                    <div className='section-2-content h-screen relative'>
                        <div className='px-[100px] pt-14'>
                            <div><LeftToRightText className='my-4' content='城市更新' textStyle={{ fontSize: 48, fontWeight: "bold", letterSpacing: "2px" }} /></div>
                            <div><LeftToRightText content='URBAN RENEWAL' textStyle={{ fontSize: 22, fontWeight: "bold", letterSpacing: "2px" }} /></div>
                            <div><LeftToRightText className='my-9' content='用科技赋能推动产业聚变，' textStyle={{ fontSize: 30, fontWeight: "bold" }} /></div>
                            <div><LeftToRightText content='实现城市有机更新与发展。' textStyle={{ fontSize: 30, fontWeight: "bold" }} /></div>
                        </div>
                        <div className='update-card-box flex absolute bottom-[25%] right-[7%]'>
                            {
                                updateCityDatas.map((data, index) => (
                                    <UpdateCityCard cardDatas={data} key={data.title} className={index === updateCityDatas.length - 1 ? "" : "mr-[8px]"} />
                                ))
                            }
                        </div>
                        <div className='absolute font-bold  bottom-[4%]'>
                            <div className='big-words mb-5 tracking-widest  text-[#8eb0c4] text-[60px]'>
                                <Marquee autoFill={true} style={{ overflow: "hidden" }}>
                                    FOCUSING ON URBAN RENEW
                                </Marquee>
                            </div>
                            <Marquee direction={"right"} autoFill={true} style={{ overflow: "hidden" }}>
                                <div className='small-words text-[20px] text-[#8cb2c3]'>以城市更新为核心，解决城市痛点</div>
                            </Marquee>
                        </div>
                    </div>
                </div>
            </section>
            <div className='business-area container mx-auto flex flex-col justify-center pt-12 pb-16'>
                <EngChiTitle zhC='业务领域' eng='BUSINESS AREA' />
                <div className='card-box w-full lg:flex lg:justify-between '>
                    {
                        cardData.map(cardData => {
                            return <BusAreaCard cardData={cardData} key={cardData.title} className='lg:w-[calc((100%-40px)/3)]' />
                        })
                    }
                </div>
            </div>
            <img src="/src/assets/home/pic.png" alt="" />
            <div className='latest-news container mx-auto flex flex-col justify-center pt-15 pb-60'>
                <EngChiTitle zhC='最新动态' eng='LATEST NEWS' />
                <div className='lg:flex lg:justify-between'>
                    {
                        Array.from({ length: 3 }, (_, index) => (
                            <NewsCard newsData={newsData} key={index} className=' lg:w-[calc(100%/3-20px)]' />
                        ))
                    }
                </div>
            </div>
        </BasePage >
    )
}
